<%@ page language="java" contentType="text/html; charset=ISO-8859-1"
    pageEncoding="ISO-8859-1"%>
<%@ page import="java.util.*,java.net.*" %>
<%@ page import="org.nanotek.base.*" %>
<%
response.setHeader("Cache-Control","no-cache");
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" href="/javascript/development-bundle/themes/ui-lightness/jquery-ui.css">
<script src="/javascript/js/jquery-1.10.2.js"></script>
<script src="/javascript/js/jquery-ui-1.10.4.js"></script>
<script type="text/javascript" src="/javascript/script_utils.js"></script>
<script type="text/javascript" src="/javascript/uuid.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style>
  #resizable { width: 150px; height: 150px; padding: 0.5em; }
  #resizable td { text-align: center; margin: 0; }
</style>
<script>
  $(function() {
    $( "#resizable" ).resizable();
  });
  
  $( document ).ready(function() {
		$("a.expand")
		.click(function() 
		 	{
				event.preventDefault();
				anchorId =  $( this ).attr('id');
				queryEl = $("div."+anchorId);
				if (queryEl.css("display") == "inline") 
					queryEl.css("display","none");
				else
					$("div."+anchorId).css("display","inline");
				console.log( $( this ).attr('class'));
		 	}
		);
		
		$("a.target_link").click(function(){ 
			event.preventDefault();
			url =  $( this ).attr('href');
			createFrameSection(url);
		});
		
		$("#officeform").on("submit", function (event)
				{ 
					event.preventDefault();
			  		console.log( $( this ).serializeArray() );
			  		office = new Object();
			  		office.id = $("#officeid").val(); 
					office.name = $("#officename").val(); 
					office.url = $("#officeurl").val();
					details = $(".contactDetail"); 
					office.details = new Array();
					for (index in details) 
					{ 
						  value = details[index].value;
						  valueName = details[index].name; 
						  controlValue = $("#"+valueName).val();
						  if (index != "length"){ 
							  var detail = {name:"",value:"" };
							  detail.value = value;
							  detail.name = controlValue;
			    			  office.details[index] = detail;
						  }
					}
				  //office.contactInfo = $("#officeContactInfo").val(); 
				  
				  var data =  JSON.stringify(office);
				  $( "#showvalues" ).text("Serialized form " +  data);
				  console.log(data);
				});
		
		
		$( "#createInputSectionButton" ).on("click" , function(event) 
				{ 
			 		var fieldList = null; 
					var controlUUID = uuid.v1();
					 ajaps.contentType='application/json';
					 ajaps.callbacksuccess =  
						function(data,sts,xhr)
					  		{ 
						  		fieldList = data.fieldList;
						  		createOptions();
					  		};
					  
				     ajaps.callbackerror = 
				    	  function (xhr,sts,error) { 
				    	  		console.log("error request " + xhr);
				    	  		console.log ("error " + error);
				    	  		console.log (" sts " + sts);
				      		};
				      	  ret = ajaps.send(ajaps.buildRequest("officeData/getFieldList",null,"GET"),"",ajaps.set);
				      	  
						function createOptions() { 
				      	  $("#detailarray").append("<div>"+
							"<div style='float:left'>"+
								"<input class='contactDetail' type='text' size=35 class='sectionCreateInput' name='" +controlUUID + "'></input>" +
							 "</div>"+
							 	"<div style='float:right'>" +  createBaseFieldsOption(controlUUID,fieldList) + "</div>"+
							 "</div></br/>");
						}
				}); 
  });
  
  function submitNewRecord(form) 
  { 
  	  console.log( form.serializeArray() );
  	  office = new Object();
  	  //var data =  JSON.stringify($( this ).serializeArray());
  	  office.id = $("#officeid").val(); 
  	  office.name = $("#officename").val(); 
  	  office.url = $("#officeurl").val();
  	  details = $(".contactDetail"); 
  	  office.details = new Array();
  	  for (index in details) 
  		{ 
  			  value = details[index].value;
  			  valueName = details[index].name; 
  			  controlValue = $("#"+valueName).val();
  			  if (index != "length"){ 
  				  var detail = {name:"",value:"" };
  				  detail.value = value;
  				  detail.name = controlValue;
    			  office.details[index] = detail;
  			  }
  		}
  	  //office.contactInfo = $("#officeContactInfo").val(); 
  	  
  	  var data =  JSON.stringify(office);
  	  
  	  ajaps.contentType='application/json';
  	  ajaps.callbacksuccess =  formSucessHandler;
        ajaps.callbackerror = 
    	  function (xhr,sts,error) { 
    	  		console.log("error request " + xhr);
    	  		console.log ("error " + error);
    	  		console.log (" sts " + sts);
      		};
  	  ret = ajaps.send(ajaps.buildRequest("officeData/newCompany",data,"POST"),"",ajaps.set);
  	  console.log("sending update " + ret);
  	  //$( "#showvalues" ).text("Serialized form " + JSON.stringify($( this ).serializeArray()));
  	 $( "#showvalues" ).text("Serialized form " +  JSON.stringify(office));
  }
  
  function createFrameSection(url){ 
		frameDiv = $("#framediv"); 
		frameDiv.empty();
		frameDiv.append("<iframe id=mainframe name=mainframe src=" + url + " width=800 height=" +$("#detFrame").height() + " scrolling='yes' sandbox='allow-same-origin allow-forms allow-scripts' ></iframe>");
	} 
  
  function createBaseFieldsOption(id,fieldList) 
  {
	 	var opt = "";
  		for (index in fieldList) 
  			{ 
  				value = fieldList[index]; 
  				opt = opt + "<option id="+value +">"+value+"</option>";
  			}
  		opt = "<select class='contactBaseFields' id = " + id +">" + opt + "</select>";
  		return opt;
  }
  
</script> 
<title>Offices List Title</title>
</head>
<body>
<div style="text-align: center;width:100%;"><p class=paragraph>"By pressing down a special key
It plays a little melody"</p></div>
<table  border=1 style="width:1200px">
<tr>
<td id="detFrame">
	<div id="framediv" style="position:relative,left:2px;top:2px;width:800px;height:600px">
	</div>
</td>
<td>
	<form name="contactform" action="saveContact" id="officeform">
		<span><label for="office.id">id:</label><input type="text" name="id" id="officeid" size="8" value=""/></span>	
		<br/>
		<span><label for="office.name">name:</label><input type="text" name="name" id="officename" size="60" value=""/></span>	
		<br/>
		<span><label for="office.url">url:</label><input type="text" name="url" id="officeurl" size="60" value=""/></span>	
		<br/>
		<div id="detailarray">
		</div>
		<br/>
		<table>
		<tr>
		<td>
		<div id=formCommandOptions class=formCommands style="position:relative;left=2px;top=2px">
			<input type=button name=btnnew value="save+new" /><input type=submit name=btnsave value="save" /><input type=button name=create id="createInputSectionButton" value="Create Input Section" />
		</div>
		</td>
		</tr>
		</table>
	</form>
</td>
</tr>
<tr>
<td>
</td>
<td>
	<div id="showvalues"></div>
</td>
</tr>
<tr>
<td style="vertical-align:text-top">
<iframe src="/search_box.html" 
			style="position:relative;left:0px;top:0px" 
			width="100%" height="1400px"  sandbox='allow-scripts allow-same-origin'  ></iframe>
</td>
<td style="text-align: left;vertical-align: top;">
<div style="text-align:center;">
<table style="width:100%;border: 1px">
<tr>
<td><a>Previous</a></td><td><a>Home</a></td><td><a>Next</a></td>
</tr>
</table>
</div>
<%="Office List"%>
<br/>
<%List<Office> offices = (List<Office>)request.getAttribute("offices");
for (Office office : offices) {
String aId = new Long (System.nanoTime()).toString();%>
<%=office.getName()%><a class="expand" id="<%=aId%>" href="">a</a>
<div  style="display:none;" class="<%=aId%>">
<ul>
<%for (Url url : office.getUrls()) { %>
	<li>
		<a class="target_link" id="<%=aId%>" href="<%=url.getUrl()%>"><%=url.getUrl()%></a>
	</li>
<%}%>
</ul>
</div>
<br/>
<%}%>
</td>
</tr>
<tr >
<td colspan=2 style="text-align:center;">
<div style="text-align:center;">
<table style="width:100%">
<tr>
<td><a>Previous</a></td><td><a>Home</a></td><td><a>Next</a></td>
</tr>
</table>
</div>
</td>
</tr>
</table>
</body>
</html>